/* 自定义公共样式库 */

// 一、定义主要颜色

/* 主背景颜色 (深蓝)*/
.main-bg-color{background: $main-bg-color;}
/* 主点击背景颜色(紫色) */
.main-bg-hover-color{background: $main-bg-hover-color;}
/* 主字体颜色(浅灰色) */
.main-text-color{color: $main-text-color;}
/* 主字体背景颜色(浅灰色) */
.main-text-bg-color{background: $main-text-bg-color;}
/* 主边框颜色(深蓝色) */
.main-border-color{border-color: $main-border-color;}
/* 主盒子颜色(淡蓝色) */
.main-box-color{background: $main-box-color;}
/* 主页面颜色（藏蓝色） */
.main-page-color{background-color: $main-page-color;}

// 二、主要样式

// 2.1 字体
/* @font-face{
	font-family: myFont;
	font-weight: normal;
	font-style: normal;
	font-display: swap;
	src: url('~@/static/font/SourceHanSansCN-Normal.otf') format('opentype');
}
view,text{
	font-family: 'myFont';
} */

// 2.2 标签格式化
// nvue不能用标签命名样式，不能放在微信组件中，否则微信开发工具会报警告，无法使用标签名当做选择器
/* #ifndef APP-NVUE */
page {
	font-size: 28rpx;
	// background-color: #1A1333;
}
image {
	display: inline-block;
	width: 100%;
}
// 在weex，也即nvue中，所有元素默认为border-box
view,
text {
	box-sizing: border-box; // width/height = border + padding + 内容的  width/height
}
/* #endif */

// 2.3 常用样式集合
/* 页面最外层 */
.main-page {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 20rpx 20rpx;
	color: #FFFFFF;
	background-color: #fff;
}
/* 内容盒子 */
.main-box {
	background-color: rgba(40,33,65,1);
	padding: 20rpx;
	border-radius: 20rpx;
}

// 2.4 其他公共样式
/* 状态栏高度 */
.status-bar {height: var(--status-bar-height);width: 100%;}
/* 内容区域距离顶部的距离 */
.window-top {height: var(--window-top);width: 100%;}
/* 内容区域距离底部的距离 */
.window-bottom {height: var(--window-bottom);width: 100%;}

// 三、基础样式

// 3.1 颜色样式
$style-color: map-merge($behaviour-color,$theme-color);
/* 文本、边框、背景 */
@each $key,$val in $style-color {
	/* 文本颜色 */
	.text-#{$key} {
		color: #{$val}!important;
	}
	/* 边框颜色 */
	.border-#{$key} {
		border-color: #{$val}!important;
	}
	/* 背景颜色 */
	.bg-#{$key} {
		background-color: #{$val}!important;
	}
}
/* 文本颜色 */
@each $key,$val in $text-color {
	.text-#{$key} {
		color: #{$val}!important;
	}
}
/* 边框颜色 */
@each $key,$val in $border-color {
	.border-#{$key} {
		color: #{$val}!important;
	}
}

// 3.2 阴影
.shadow-sm {
    box-shadow: 0 2rpx 4rpx rgba(114, 130, 138, 0.2)!important;
}
.shadow {
    box-shadow: 0 8rpx 16rpx rgba(114, 130, 138, 0.2)!important;
}
.shadow-lg {
    box-shadow: 0 16rpx 48rpx rgba(114, 130, 138, 0.2)!important;
}

// 3.3 宽高
.h-100{ height: 1250rpx;}
.h-50{ width: 625rpx; }
@for $i from 1 through 10 {
	$var: $i * 10;
	.w-#{$var} {
		width: #{$var+'%'};
	}
}
@for $i from 1 through 19 {
	$var: $i * 5;
	.w-#{$var} {
		width: #{$var+'%'};
	}
}

// 3.4 文字省略
.line-1 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.line-2 {
    -webkit-line-clamp: 2;
}
.line-3 {
    -webkit-line-clamp: 3;
}
.line-4 {
    -webkit-line-clamp: 4;
}
.line-5 {
    -webkit-line-clamp: 5;
}
.line-2, .line-3, .line-4, .line-5 {
    overflow: hidden;
	word-break: break-all;
    text-overflow: ellipsis; 
    display: -webkit-box; // 弹性伸缩盒
    -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
}

// 3.5 定位
.position-relative,.relative{ 
	position: relative; 
}
.position-absolute,.absolute{ 
	position: absolute; 
}
.position-fixed,.fixed{ 
	position: fixed; 
}
.position-sticky,.sticky{ 
	position: static;
}
.left-0{ left: 0; }
.top-0{ top: 0; }
.bottom-0{ bottom: 0; }
.right-0{ right: 0; }

// 3.6 文本
/* 字体大小-数值形式 */
@for $i from 20 through 50 {
	.font-#{$i} { 
		font-size: $i + rpx;
	}
}
/* 字体大小-断点形式 */
.font-xs {
	font-size: 22rpx;
}
.font-sm {
	font-size: 26rpx;
}
.font-md {
	font-size: 28rpx;
}
.font-lg {
	font-size: 30rpx;
}
.font-xl {
	font-size: 34rpx;
}
/* 文本对齐 */
.text-left{ text-align: left; }
.text-right{ text-align: right; }
.text-center{ text-align: center; }
/* 文本粗细 */
@for $i from 1 through 7 {
  $var: $i * 100;
	.font-weight-#{$var}{ font-weight: #{$var}!important; }
}
@each $var in normal, bold, bolder, lighter{
	.font-weight-#{$var}{ font-weight: #{$var}; }
}
/* 文本划线 */
.line-through{ text-decoration: line-through; } /*中划线*/
.underline{ text-decoration: underline;} /*下划线*/


// 3.7 内外边距
/* 上下左右的内外边距：0 - 80（递增数：1） */
@for $i from 0 through 80 {
	// 只要双数和能被5除尽的数
	@if $i % 2 == 0 or $i % 5 == 0 {
		// 定义外边距，结果如：m-30
		.m-#{$i} {
			margin: $i + rpx!important;
		}
		// 定义内边距，结果如：p-30
		.p-#{$i} {
			padding: $i + rpx!important;
		}
		@each $short, $long in l left, t top, r right, b bottom {
			// 定义外边距，结果如： ml-30
			.m#{$short}-#{$i} {
				margin-#{$long}: $i + rpx!important;
			}
			// 定义内边距
			.p#{$short}-#{$i} {
				padding-#{$long}: $i + rpx!important;
			}
		}
	}
}
/* 水平和垂直的内外边距：0 - 80（递增数：10）*/
@for $i from 0 through 8 {
	$var: $i * 10;
	.mx-#{$var} {
		margin-left: $var + rpx!important;
		margin-right: $var + rpx!important;
	}
	.my-#{$var} {
		margin-top: $var + rpx!important;
		margin-bottom: $var + rpx!important;
	}
	.px-#{$var} {
		padding-left: $var + rpx!important;
		padding-right: $var + rpx!important;
	}
	.py-#{$var} {
		padding-top: $var + rpx!important;
		padding-bottom: $var + rpx!important;
	}
}
/* 自动填充的内外边距 */
@each $short, $long in l left, t top, r right, b bottom {
	// 定义外边距
	.m#{$short}-auto {
		margin-#{$long}: auto!important;
	}
	// 定义内边距
	.p#{$short}-auto {
		padding-#{$long}: auto!important;
	}
}
.m-auto{ margin: auto;}
.mx-auto{ margin-left: auto;margin-right: auto;}
.my-auto{ margin-top: auto;margin-bottom: auto;}
.px-auto{ padding: auto;}
.px-auto{ padding-left: auto;padding-right: auto;}
.py-auto{ padding-top: auto;padding-bottom: auto;}

// 3.8 边框
/* 边框样式 */
@each $var in left, right, top, bottom {
	// ,边框，结果如：border-left
	.border-#{$var}{
		border-#{$var}-width: 1rpx; border-#{$var}-style: solid; border-#{$var}-color: map-get($border-color,color1); 
	}
	// 边框为0，结果如：border-left-0
	.border-#{$var}-0{
		border-#{$var}-width: 0;
	}
}
.border{  border-width: 1rpx; border-style: solid; border-color: map-get($border-color,color1);}
.border-0{ border-width: 0; }

/*边角弧度*/
.rounded-0{ border-radius:0; }
.rounded{ border-radius: 5rpx; } 
.rounded-10{ border-radius: 10rpx; }
.rounded-20{ border-radius: 20rpx; }
.rounded-30{ border-radius: 30rpx; }
.rounded-50{ border-radius: 50rpx; }
.rounded-circle{ border-radius:100%; }

// 3.9 行高
.line-h-0{ line-height: 0!important; }
.line-h-05{ line-height: 0.5!important;}
.line-h-10{ line-height: 1!important; }
.line-h-12{ line-height: 1.2!important; }
.line-h-15{ line-height: 1.5!important; }
.line-h-20{ line-height: 2!important; }
.line-h-30{ line-height: 3!important; }

// 3.10 flex布局
.flex-row { // 主轴为水平方向，起点在左端
	box-sizing: border-box!important;
	display: flex!important;
	flex-direction: row;
	flex-wrap: wrap;
}
.row-center {
	box-sizing: border-box!important;
	display: flex!important;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.flex-col { // 主轴为垂直方向，起点在上沿
	box-sizing: border-box!important;
	display: flex!important;
	flex-direction: column;
}
.col-center {
	box-sizing: border-box!important;
	display: flex!important;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.d-flex{ display: flex; }  // 弹性布局
.d-block{ display: block; } // 块级元素
.d-inline-block{ display: inline-block; } // 内联块级元素
.flex-wrap{ flex-wrap: wrap; } // 规定flex容器是多行
.flex-nowrap{ flex-wrap: nowrap; } // 规定flex容器是单行
.flex-shrink{flex-shrink: 0;} // 指定了 flex 元素的收缩规则,flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值
.j-start{ justify-content: flex-start; } // (默认)在主轴上:起点对齐
.j-center{ justify-content: center; } // 在主轴上:居中
.j-end{ justify-content: flex-end; } // 在主轴上:终点对齐
.j-sa{ justify-content: space-around;} // 每个元素两侧的间隔相等
.j-sb{ justify-content: space-between; } // 在主轴上:两端对齐
.j-se{ justify-content: space-evenly;} // 在主轴上：平均分配容器元素
.a-center{ align-items:center; } // 在交叉轴上:居中
.a-start{ align-items: flex-start; } // (默认)在交叉轴上:起点对齐
.a-end{ align-items:flex-end; } // 在交叉轴上:终点对齐
.a-baseline{ align-items: baseline;} // 基线对齐
.a-stretch{ align-items: stretch; } // (默认值)如果项目未设置高度或设为auto，将占满整个容器的高度
.a-self-start{ align-self: flex-start; }
.a-self-auto{ align-self: auto; } // (默认值)继承父元素的align-items属性，如果没有父元素，则等同于stretch
.a-self-end{ align-self: flex-end; }
.a-self-stretch{ align-self:stretch; } 
.a-self-baseline{ align-self:baseline; } // 项目的第一行文字的基线对齐

/* flex等分 */
@for $i from 0 through 12 {
	.flex-#{$i} {
		flex: $i;
	}
}

// 3.11 其他样式
/* 换行 */
.break-all { word-break: break-all; } // 在单词内换行
.break-word { word-wrap: break-word; } // 在长单词或 URL 地址内部进行换行

/* scroll-view */
.scroll-row{ width: 100%;white-space: nowrap; } // 滚动组件-宽度100%,文本不会换行
.scroll-row-item{ display: inline-block; } // 滚动项-内联元素